<template>
	<view class="wrapper">
		<head-title titleText="修改背景墙" showLeftButton="true"></head-title>
		<view class="topCont">
			<view></view>
			<image :src="imgsrc" mode="aspectFill"></image>
		</view>
		<block v-if="select">
			<view @tap="bindphoto" class="btn">相册选择</view>
			<view @tap="slectSys" class="btn no_margin">系统图片</view>
		</block>
		<view @tap="change" v-else class="btn">更换背景墙</view>
		<view v-if="sys" class="sysCont">
			<scroll-view scroll-y class="cont flex_row">
				<view @tap="bindselectImg(item.c_img)" v-for="(item,index) in sysImg" :key='index' class="list">
					<image :src="item.c_img" mode="aspectFill"></image>
				</view>
			</scroll-view>
			<view @tap="back" class="back">取消</view>
		</view>
	</view>
</template>
<script>
	import headTitle from "../../components/headTitle.vue";
	import common from "../../common/network.js";
	var session = '';
	export default {
		components:{headTitle},
		data(){
			return{
				select:false,
				imgsrc:'',
				sysImg:[],sys:false,
			}
		},
		onLoad:function(options){
			var that = this;
			this.select = false;
			if(options.session!=undefined){
				session = options.session;
				that.getwallPhoto();
			}else{
				common.network.getStorage('userinfo',function(data){
					session = data.session;
					that.getwallPhoto();
				})
			}
		},
		methods:{
			getwallPhoto:function(){
				var that = this;
				var $data = {
					'type':'zupinfo_res_phone_wall',
					'session':session
				};
				common.network.request($data,function(res){
					console.log(res)
					that.sys = false;
					that.imgsrc = res.c_img;
				})
			},
			slectSys:function(){//系统图片
				this.getList();
			},
			getList:function(){
				var that = this;
				var $data = {
					'type':'zupinfo_res_sys_phone_wall',
					'session':session
				};
				common.network.request($data,function(res){
					console.log(res)
					that.sys = true;
					that.sysImg = res;
				})
			},
			bindselectImg:function(src){
				this.imgsrc = src;
				this.selectImg(src);
			},
			change:function(){
				this.select = true;
			},
			bindphoto:function(){
				var that = this;
				uni.chooseImage({
					count:1,
					success:function(res){
						var arr = res.tempFilePaths;
						wx.uploadFile({
							url: 'https://yp.6vx.com/?m=Jke',
							filePath: arr[0],
							name: 'file',
							formData:{
								'type':'zupload_upload_img',
								'session':session
							},
							success:function(res){
								var stc = JSON.parse(res.data);
								var addsrc = stc.data;
								that.selectImg(addsrc);
							},
						})
					}
				})
			},
			selectImg:function(imgs){//选择系统图
				var that = this;
				var $data = {
					'type':'zupinfo_ins_phone_wall',
					'c_img':imgs,
					'session':session
				};
				common.network.request($data,function(res){
					console.log(res);
					that.getwallPhoto();
				})
			},
			back:function(){
				this.sys = false;
				this.getwallPhoto();
			}
		}
	}
</script>

<style scoped>
	.topCont{
		width: 100%;
		height: 450px;
		position: relative;
	}
	.topCont view{
		background: rgba(0,0,0,0);
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		
	}
	.topCont image{
		width: 100%;
		height: 100%;
	}
	.btn{
		width: 76%;
		margin: auto;
		margin-top: 100px;
		background: linear-gradient(to right,#AE33F6,#6673FF);
		color: #fff;
		border-radius: 10px;
		padding: 20px 0;
		text-align: center;
	}
	.no_margin{
		margin-top: 30px;
	}
	.btn:active{
		background: linear-gradient(to right,#6673FF,#AE33F6);
	}
	.sysCont{
		
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
	}
	.cont{
		flex-wrap: wrap;
		background: #3F3F3F;
		padding: 20px;
		box-sizing: border-box;
		height: 100vh;
		justify-content: space-between;
	}
	.sysCont .list{
		width: 100%;
		height: 300px;
		border-radius: 10px;
		margin-bottom: 10px;
	}
	.sysCont .list image{
		width: 100%;
		height: 100%;
		border-radius: 10px;
	}
	.back{
		color: #fff;
		background: rgba(0,0,0,0.6);
		width: 30%;
		position: fixed;
		bottom: 100px;
		left: 35%;
		padding: 10px 0;
		text-align: center;
		border-radius: 50px;
	}
</style>
